import React, { useState, useEffect } from "react"
import { Button, Table, Switch, Space, Input, Modal, Form, message } from 'antd'
import { Alert } from 'antd';
import axios from "axios"
import {

    EditTwoTone,
    DeleteTwoTone,

} from '@ant-design/icons';
const CheckList = () => {
    // const [collapsed, toggleCollapsed] = useState()
    const [list, togetlist] = useState([])
    // const [total,totatal]=useState(0)
    // const [detail,todetail]=useState({})
    const [id, getid] = useState("")
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [name, setname] = useState("")
    const [jiny, setjiny] = useState("")
    const [li, setli] = useState("")
    const [lls, setlls] = useState()
    const columns = [
        {
            title: '等级名称',
            dataIndex: 'name',
            key: 'name',
            align: "center"
        },
        {
            title: '等级经验',
            dataIndex: 'jiny',
            key: 'jiny',
            align: "center"
        },
        {
            title: '奖励比例(%)',
            dataIndex: 'li',
            key: 'li',
            align: "center"
        },
        {
            title: '创建时间',
            dataIndex: 'time',
            key: 'time',
            align: "center"
        },
        {
            title: '状态',
            dataIndex: 'lls',
            key: 'lls',
            align: "center",
            render: text => <Switch checked={text === "true" ? true : false}></Switch>
        },
        {
            title: '操作',
            key: 'action',
            align: "center",
            render: (text, record) => (
                <Space size="middle">

                    <EditTwoTone onClick={() => { showModal(record) }} />
                    <Modal title="编辑" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                        <Form
                            id="checklisteditform"
                            name="basic"
                            labelCol={{
                                span: 8,
                            }}
                            wrapperCol={{
                                span: 16,
                            }}
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={onFinish}
                            autoComplete="off"
                        >
                            <Form.Item
                                label="等级名称"
                                name="name"

                            >
                                <Input defaultValue={name} onChange={e => {
                                    setname(e.target.value)
                                }} />
                                {/* <input defaultValue={name} onChange={e=>{
                           setname(e.target.value)
                         }} type="text"/> */}
                            </Form.Item>

                            <Form.Item
                                label="等级经验"
                                name="jiny"


                            >
                                <Input defaultValue={jiny} onChange={e => {
                                    setjiny(e.target.value)
                                }} />
                            </Form.Item>
                            <Form.Item
                                label="奖励比例(%)"
                                name="li"

                            >
                                <Input defaultValue={li} onChange={e => {
                                    setli(e.target.value)
                                }} />
                            </Form.Item>
                            <Form.Item label="状态" name="lls">
                                <Switch defaultValue={lls === "true" ? true : false} onChange={onchange}></Switch>
                            </Form.Item>
                            <Form.Item
                                wrapperCol={{
                                    offset: 8,
                                    span: 16,
                                }}
                            >
                                <Button type="primary" htmlType="submit">
                                    Submit
                                </Button>
                            </Form.Item>
                        </Form>
                    </Modal>
                    <DeleteTwoTone onClick={() => { handleDelete(record) }} />
                </Space>
            ),
        },
    ]
    useEffect(() => {
        axios.get("/colonelawait").then(
            res => {
                console.log(res)
                togetlist(res.data.data)

            }
        )

    }, [])

    const onFinish = (values) => {
        console.log('Success:', values);
        setIsModalVisible(false);
        let lists = list.concat()
        lists.forEach(
            (item) => {
                if (item.id === id) {
                    // console.log(1)
                    item.name = values.name
                    item.jiny = values.jiny
                    item.li = values.li
                    const a = values.lls
                    const b = String(a)
                    item.lls = b /**/
                }
            }
        )
        //   console.log(lists)
        togetlist(lists)
        //  console.log(list)
        alert("修改成功")
    };
    const handleOk = () => {
        setIsModalVisible(false);

    };
    //控制弹出
    const handleCancel = () => {

        setIsModalVisible(false);
    };
    const showModal = (record) => {
        getid(record.id)
        setname(record.name)
        setjiny(record.jiny)
        setli(record.li)
        setlls(record.lls)
        setIsModalVisible(true);
    };

    //删除
    const handleDelete = (key) => {
        const ids = key.id
        console.log(ids)
        axios.get(`/colonelawaitDel?id=${ids}`,).then(
            res => {
                //   console.log(res)
                message.success("删除成功")
            }
        )
        axios.get("/colonelawait").then(
            res => {
                //   console.log(res)
                togetlist(res.data.data)

            }
        )

    };
    return (
        <div>
            <div className="one">
                <Alert className="alerts" message="团长等级规则：按照经验值计算等级，上月经验值到下月1日会折损50%，每月16日就算等级"
                    description="如：上月累计经验值10000，到本月1日会折损为5000，到16日计算的是5000+本月累计的经验值，进行升降级" type="info" />
                <Table className="ttable" columns={columns} dataSource={list} pagination={{ pageSize: 4 }} scroll={{ x: 800, y: 400 }} rowKey="id" >
                </Table>
            </div>

        </div>
    )
}
export default CheckList
